<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Profile page</title>
    
<link rel="stylesheet" href="/gforumstatic/themes/default/css/base.css" type="text/css" media="screen">

</head>
<body>

{% include "user_panel.inc.html" %}

{% include "dev_note.inc.html" %}

<p>
<a href="{{forumpath}}">List of forums</a>
</p>

<div class="wrapper-profile gforum">

{% if not is_other_user %}

<h1>{{user.nick_name}}</h1>

<hr>

<h2>Profile settings</h2>
<table style="width:600px; border-style: solid; border-width: 1px; border-collapse: collapse; border-color: #CCCCCC; margin-top: 10px; background: #EBF1F5;">
  <tbody>
  <tr>
    <td style="font-weight: bold; width:150px;">Nick name: </td>
    <td style="width: auto;">
      <input id="nick_name_i" type="text" value="{{user.nick_name}}">
    </td>
  </tr>
  <tr>
    <td style="background: #EBF1F5;">First name: </td>
    <td>
      <input id="first_name_i" type="text" value="{% if user.first_name %}{{user.first_name}}{% endif %}">   
    </td>
  </tr>
  <tr>
    <td style="background: #EBF1F5;">Last name: </td>
    <td>
      <input id="last_name_i" type="text" value="{% if user.last_name %}{{user.last_name}}{% endif %}">
    </td>
  </tr>
  <tr>
    <td style="background: #EBF1F5;">Where from:</td>
    <td>
      <input id="where_from_i" type="text" value="{% if user.where_from %}{{user.where_from}}{% endif %}">
    </td>
  </tr>
  <tr>
    <td style="background: #EBF1F5;">Email: </td>
    <td>
      <input id="email_i" type="text" value="{% if user.email %}{{user.email}}{% endif %}">
    </td>
  </tr>
  <tr>
    <td style="background: #EBF1F5;">Messages number:</td>
    <td>{{user.messages_number}}</td>
  </tr>
  <tr>
    <td colspan="2" style="width: 100%; padding: 10px; align: center; text-align: center; ">
      <a href="#" id="save_profile_settings_link">Save</a>
    </td>
  </tr>
</table>

<h2>Avatar settings</h2>

<table>
  <tr>
    <td style="background: #EBF1F5; vertical-align: top;">
      Avatar:
      <br/>
      <div id="avatar_div" style="width:100%; text-align: center;  align: center;">
        {% if profile_user.use_gravatar %}
            <img src="http://www.gravatar.com/avatar/{{profile_user.gravatar_hash}}">
        {% else %}
            <img src="{{forumpath}}/image/{{profile_user.image_key}}">
        {% endif %}      
      </div>
    </td>
    <td>
      <table style="width: 100%; ">
        <tr>
          <td style="vertical-align: top;">
            {% if not user.use_gravatar %}
              <label><input type="radio" name="avatar_type" value="regular" checked>Load new image</label>
            {% endif %}
            {% if user.use_gravatar %}
              <label><input type="radio" name="avatar_type" value="regular">Load new image</label>
            {% endif %}
          </td>
          <td>
            <input type="file">
          </td>
        </tr>
        <tr>
          <td style="vertical-align: top;">
            {% if user.use_gravatar %}
              <label><input type="radio" name="avatar_type" value="gravatar" checked>Use gravatar</label>
            {% endif %}
            {% if not user.use_gravatar %}
              <label><input type="radio" name="avatar_type" value="gravatar">Use gravatar</label>
            {% endif %}
            <br/>
            <div style="width:100%; text-align: center; padding-top:20px;">
              <a href="#" id="check_gravatar_link">Check</a>
            </div>
          </td>
          <td>
            <label>Email: <input id="gravatar_email_i" type="text" value="{{user.email}}"></label>
            <br/>
            <label>Size, pixels: <input id="gravatar_size_i" type="text" value="{% if not user.gravatar.size %}50{% else %}{{user.gravatar.size}}{% endif %}"></label>
          </td>
        </tr>
        <tr>
          <td colspan="2" style="width: 100%; padding: 10px; align: center; text-align: center; ">
            <a href="#" id="save_gravatar_link">Save</a>
          </td>
        </tr>
      
      </table>
    </td>
  </tr>
  </tbody>
</table>

{% endif %}


{% if is_other_user %}

<h1>{{profile_user.nick_name}}</h1>

<table style="width:500px; border-style: solid; border-width: 1px; border-collapse: collapse; border-color: #CCCCCC; margin-top: 10px; background: #EBF1F5;">
  <tbody>
  <tr>
    <td style="font-weight: bold; width: 200px;">Nick name: </td>
    <td style="text-align: left; align: left; ">{{profile_user.nick_name}}</td>
  </tr>
  <tr>
    <td style="font-weight: bold;">Where from:</td>
    <td>{% if profile_user.where_from %}{{profile_user.where_from}}{% endif %}</td>
  </tr>
  <tr>
    <td style="font-weight: bold;">Messages number:</td>
    <td>{{profile_user.messages_number}}</td>
  </tr>
  <tr>
    <td style="font-weight: bold;">Avatar:</td>
    <td>
        {% if profile_user.use_gravatar %}
            <img src="http://www.gravatar.com/avatar/{{profile_user.gravatar_hash}}">
        {% else %}
            <img src="{{forumpath}}/image/{{profile_user.image_key}}">
        {% endif %}      
    </td>
  </tr>
  </tbody>
</table>

{% endif %}

</div>

<!-- BEGIN SCRIPT SECTION -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="/gforumstatic/themes/default/js/gforum.js"></script>
<script src="/gforumstatic/themes/default/js/md5-min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    setEventHandlers();
});

// timers
var nicknameTimer, emailTimer;
// current values
var currentNickname, currentEmail;

function setEventHandlers() {
    currentNickname = $('#nick_name_i').val();
    currentEmail    = $('#email_i').val();
    
    $('#nick_name_i').keyup(function() {
        if (nicknameTimer) {
            clearTimeout(nicknameTimer);
        }
        nicknameTimer = setTimeout(function() {
            gforum.checkNickname({
                forum_root: '{{forumpath}}',
                nickname:   $('#nick_name_i').val(),
                callback: function(nicknameIsUsed) {
                    if ($('#nick_name_i').val() == currentNickname) {
                        $('#nick_name_i').removeClass('invalid-field');
                        return;
                    }
                    if (nicknameIsUsed) {
                        $('#nick_name_i').addClass('invalid-field');
                    } else {
                        $('#nick_name_i').removeClass('invalid-field');
                    }
                }
            });
        }, 300);
    });
    
    $('#email_i').keyup(function() {
        if (emailTimer) {
            clearTimeout(emailTimer);
        }
        emailTimer = setTimeout(function() {
            gforum.checkEmail({
                forum_root: '{{forumpath}}',
                email:      $('#email_i').val(),
                callback: function(emailIsUsed) {
                    if ($('#email_i').val() == currentEmail) {
                        $('#email_i').removeClass('invalid-field');
                        return;
                    }
                    if (emailIsUsed) {
                        $('#email_i').addClass('invalid-field');
                    } else {
                        $('#email_i').removeClass('invalid-field');
                    }
                }
            });
        }, 300);
    });
    
    $('#save_nick_name_link').click(function() {saveData('#nick_name_i', 'nick_name');});
    $('#save_first_name_link').click(function(){saveData('#first_name_i', 'first_name');});
    $('#save_last_name_link').click(function() {saveData('#last_name_i', 'last_name');});
    $('#save_where_from_link').click(function() {saveData('#where_from_i', 'where_from');});
    $('#save_email_link').click(function() {
        var emailValue = $('#email_i').val().trim();
        if (!gforum.validateEmail(emailValue)) {
            alert('Incorrect email address!');
            return;
        }
        saveData('#email_i', 'email');
    });
    $('#check_gravatar_link').click(checkGravatar);
    $('#save_gravatar_link').click(saveGravatar);
    $('#save_profile_settings_link').click(saveProfileSettings);
}
function saveData(id, pn) {
    var opt = {
        forum_root: '{{forumpath}}'
    };
    opt[pn] = $(id).val();
    opt.callback = function(resp) {
        if (resp.status == 'ok') {
            alert('Value changed!');
            location.reload();
        } else {
            alert(resp.errorMsg);
        }
    };
    gforum.editProfile(opt);
}

function checkGravatar() {
    var email = $.trim($('#gravatar_email_i').val().toLowerCase());
    var emailMd5 = hex_md5(email);
    //alert(emailMd5);
    var src='http://gravatar.com/avatar/'+emailMd5;
    var size = $.trim($('#gravatar_size_i').val());
    if (!size) size = 50;
    src += '?s='+size;
    $('#avatar_div img').attr('src', src);
}

function saveGravatar() {
    var email = $.trim($('#gravatar_email_i').val().toLowerCase());
    var size = $.trim($('#gravatar_size_i').val());
    gforum.saveGravatar({
        forum_root: '{{forumpath}}',
        email: email, 
        size: size,
        callback: function(resp) {
            if (resp.status == 'ok') {
                alert('Value changed!');
                location.reload();
            } else {
                alert(resp.errorMsg);
            }
        }
    });
}

function saveProfileSettings() {
    var emailValue = $('#email_i').val().trim();
    if (!gforum.validateEmail(emailValue)) {
        alert('Incorrect email address!');
        return;
    }
    
    var opt = {
        forum_root: '{{forumpath}}',
        nick_name:  $('#nick_name_i').val(),
        first_name: $('#first_name_i').val(),
        last_name:  $('#last_name_i').val(),
        //where_from: $('#where_from_i').val(),
        email:      emailValue
    };

    opt.callback = function(resp) {
        if (resp.status == 'ok') {
            alert('Data changed ok!');
            location.reload();
        } else {
            alert(resp.errorMsg);
        }
    };
    
    gforum.saveProfileData(opt);
}
</script>

<!-- END SCRIPT SECTION -->

</body>
</html>
